<template>
  <panel-head :route="route"/>
  <div class="btns">
    <el-button :icon="Plus" type="primary" size="small" @click="open(null)">新增</el-button>
  </div>
  <el-table 
    :data="menuListData.list">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="昵称" />
    <el-table-column prop="permissionName" label="菜单权限" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
   <div class="pagination-info">

     <el-pagination
      v-model="page.pageNum"
      :page-size="page.pageSize"
      :bakcground="false"
      size="small"
      layout="total,prev,pager,next"
      :total="menuListData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     />
   </div>
  <el-dialog 
    v-model="dislogFormVisible"
    :title="dialogTitle"
    :before-close="beforeClose"
    width="500"
    >
    <el-form 
      ref="formRef"
      label-width="100px"
      label-position="left"
      :model="form"
      :rules="rules"
    >
    <el-form-item v-show="false" prop="'id'">
      <el-input v-model="form.id" ></el-input>
    </el-form-item>
    <el-form-item prop="name" label="名称">
      <el-input v-model="form.name" placeholder="请输入名称与权限"></el-input>
    </el-form-item>
    <el-tree 
      ref="treeRef"
      style="max-width: 600px;"
      :data="permissionsData"
      node-key="id"
      show-checkbox
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="[2]"
    />
    </el-form>
    <template #footer>
      <el-button type="primary" @click="confirm(formRef)">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,reactive, onMounted, nextTick } from 'vue';
import { userGetMenu,userSetMenu, menuList }from '@/api/index.js';
import { Plus } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';

const route = useRoute();
// console.log('route', route);

// 定义树形数据
const permissionsData = ref([])
// 定义表单引用
const formRef = ref(null);
// 定义表单数据
const form = reactive({
  id:'',
  name: '',
  permissions: ''
})
// 设置权限弹窗标题
const dialogTitle = ref('新增权限');



// 获取权限列表数据
const menuListData = reactive({
  list: [],
  total:0
});

// 获取权限列表
const page = reactive({
  pageNum:1,
  pageSize:10,
})

// 获取权限列表数据
const getMenuList = async ()=>{
  await menuList(page).then(({data})=>{
    // console.log(data)
    if(data.code === 10000){
      const {list,total} = data.data
      menuListData.list = list
      menuListData.total = total
    }
  })
}

// 处理分页大小变化
const handleSizeChange = (val)=>{
  page.pageSize = val;
  getMenuList();
}

// 处理当前页变化
const handleCurrentChange = (val)=>{
  page.pageNum = val;
  getMenuList();
}

// 打开对话框
const open = (rowData={})=>{
  dislogFormVisible.value = true
  dialogTitle.value = rowData.id ? '编辑权限' : '新增权限';
  console.log('rowData',rowData)
  nextTick(()=>{
    if(rowData){
      Object.assign(form,{id:rowData.id,name:rowData.name})
      // 设置默认选中权限
      // console.log('rowData',rowData)
      treeRef.value.setCheckedKeys(rowData.permission)
    }
  })
}

onMounted(()=>{
  // 获取权限数据
  getUserMenu()
  // 获取权限列表
  getMenuList()
})
async function getUserMenu(){
  await userGetMenu().then(res =>{
    // console.log(res);
    permissionsData.value = res.data.data
  })
}

// 控制对话框的显示和隐藏
const dislogFormVisible= ref(false);

const beforeClose = ()=>{
  dislogFormVisible.value = false;
  formRef.value.resetFields(); // 重置表单
  treeRef.value.setCheckedKeys(defaultCheckedKeys); // 重置树形选择
}

// 默认权限
const defaultCheckedKeys = [4,5];
const treeRef = ref(null);

const rules= reactive({
  name:[{ required:true,message:'请输入权限名称',trigger:'blur'}]
})

// 权限确认按钮
const confirm = async (formEl)=>{
  if(!formEl) return
  await formEl.validate((valid,fields)=>{
    if(valid){
      const permissions = JSON.stringify( treeRef.value.getCheckedKeys())
      userSetMenu({name:form.name,permissions:permissions,id:form.id}).then(({data})=>{
        // console.log(data)
        if(data.code===10000){
          // 关闭对话框
          dislogFormVisible.value = false
          Elmessage.success('权限设置成功')
          // 重新获取列表
          getMenuList()
        }
      })
    }else{
      console.log('error submit!', fields)
    }
  })
}

</script>

<style lang="less" scoped>
.pagination-info{
  width: 100%;
  text-align: right;
  // margin-top: 10px;
  height: 45px;
  line-height: 45px;
  background-color: white;
  display: flex;
  justify-content: end;
}
.btns{
  padding: 10px 0 10px 10px;
  background-color: white;
}
</style>